<nz-collapseset [nzBordered]="false" class="filter-form">
    <nz-collapse [nzTitle]="'显示筛选条件'">
        <nz-card>
            <ng-template #body>
                <form nz-form [nzType]="'inline'">
                    <div nz-form-item>
                        <div nz-form-label>
                            <label>账户级别</label>
                        </div>
                        <div nz-form-control>
                            <nz-select nzAllowClear [nzShowSearch]="true">
                                <nz-option *ngFor="let option of searchOptions" [nzLabel]="option.label" [nzValue]="option.value">
                                </nz-option>
                            </nz-select>
                        </div>
                    </div>
                    <div nz-form-item>
                        <div nz-form-label>
                            <label>账户名称</label>
                        </div>
                        <div nz-form-control>
                            <nz-input name="accountName" [(ngModel)]="filter.accountName"></nz-input>
                        </div>
                    </div>
                    <div nz-form-item>
                        <div nz-form-label>
                            <label>状态</label>
                        </div>
                        <div nz-form-control>
                            <nz-radio-group [(ngModel)]="filter.accountStatus" name="accountStatus" [nzSize]="'middle'">
                                <label nz-radio-button [nzValue]="'A'">
                                      <span>全部</span>
                                    </label>
                                <label nz-radio-button [nzValue]="'B'">
                                      <span>正常</span>
                                    </label>
                                <label nz-radio-button [nzValue]="'C'">
                                      <span>停用</span>
                                    </label>
                            </nz-radio-group>
                        </div>
                    </div>
                </form>
            </ng-template>
        </nz-card>
    </nz-collapse>
</nz-collapseset>
<nz-table #nzTable [nzIsPagination]="false" [nzAjaxData]="accountsList">
    <thead nz-thead>
        <tr>
            <th nz-th><span>账户名称</span></th>
            <th nz-th><span>账户级别</span></th>
            <th nz-th><span>状态</span></th>
            <th nz-th><span>重置密码</span></th>
        </tr>
    </thead>
    <tbody nz-tbody>
        <tr nz-tbody-tr *ngFor="let data of nzTable.data">
            <td nz-td>{{data.accountName}}</td>
            <td nz-td>{{data.accountLevel}}</td>
            <td nz-td>
                <nz-switch [ngModel]="data.accountStatus">
                    <i class=" anticon anticon-check" checked></i>
                    <i class=" anticon anticon-cross" unchecked></i>
                </nz-switch>
            </td>
            <td nz-td>input</td>
        </tr>
    </tbody>
</nz-table>

<div class="reeF-center-btn">
    <button nz-button (click)="createAccount()">
        <span>新增账户</span>
    </button>
</div>

<nz-modal [nzContent]="modalContent" [nzWrapClassName]="'vertical-center-modal'" [nzVisible]="isVisible" [nzTitle]="'新建账户'"
    [nzClosable]="false" (nzOnCancel)="handleCancel($event)" (nzOnOk)="handleOk($event)">
    <ng-template #modalContent>
        <nz-input [(ngModel)]="accountName" [nzPlaceHolder]="'请输入账户名称'"></nz-input>
        <nz-select nzAllowClear [nzPlaceHolder]="'选择账户权限'" [(ngModel)]="selectedOption" [nzShowSearch]="true">
            <nz-option *ngFor="let option of searchOptions" [nzLabel]="option.label" [nzValue]="option.value">
            </nz-option>
        </nz-select>
    </ng-template>
</nz-modal>